<script setup  lang="ts">
import {onMounted,ref} from "vue";
import {Search, User} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import * as Api from "@/api/xs.js";
import router from "@/router/index.js";
const name = JSON.parse(localStorage.getItem("name"))
const role = JSON.parse(localStorage.getItem("role"))
console.log(name)
const id = ref("")
const isrole = ref('true')
onMounted( () => {
  if (role === '老师'){
    isrole.value = false
  }
})
const tuichu = async ()=>{
  await ElMessageBox.confirm('您确定要退出登录吗', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    localStorage.clear()
    ElMessage.success('已安全退出')
    router.push('/login')
  })
}

</script>
<template>
    <div class="common-layout" style="height: 100%;">
        <el-container style="height: 100%">
          <el-aside width="120px">
            <div class="logo" >
              <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  style="margin-top:15px;margin-right: 5px;width: 35px;height: 35px;margin-left: 5px"
              />
              <div style="width: 80px;height: 30px;font-size: 18px;margin-top: 25px;font-weight: lighter;">{{name}}</div>
            </div>
            <el-menu router  unique-opened  style="font-size:12px ;border-right: none;color:white;margin-top: 20px" >
              <el-menu-item index="/">
                <el-icon><HomeFilled /></el-icon><span>首页</span>
              </el-menu-item>
              <el-menu-item v-show="isrole" index="/manage/people">
                <el-icon> <el-icon><User /></el-icon></el-icon> <span>职工管理</span>
              </el-menu-item>
              <el-menu-item v-show="isrole" index="/manage/stu">
                <el-icon> <el-icon><User /></el-icon></el-icon> <span>学生管理</span>
              </el-menu-item>
              <el-menu-item v-show="isrole" index="/manage/student">
                <el-icon> <el-icon><Management /></el-icon> </el-icon> <span>班级管理</span>
              </el-menu-item>
                <el-menu-item v-show="isrole" index="/manage/swiper">
                  <el-icon> <el-icon><Menu /></el-icon> </el-icon> <span>轮播图管理</span>
                </el-menu-item>
                <el-menu-item v-show="isrole" index="/manage/tiku">
                  <el-icon> <el-icon><Document /></el-icon> </el-icon> <span>题库管理</span>
                </el-menu-item>
              <el-menu-item v-show="isrole" index="/audio">
                <el-icon> <el-icon><Document /></el-icon> </el-icon> <span>听力库管理</span>
              </el-menu-item>

<!--              <el-menu-item index="/manage/classroom">-->
<!--                <el-icon> <el-icon><TrendCharts /></el-icon> </el-icon> <span>教室分配</span>-->
<!--              </el-menu-item>-->
              <el-menu-item v-show="!isrole" index="/manage/class">
                <el-icon><UserFilled /></el-icon><span>班级管理</span>
              </el-menu-item>
              <el-menu-item v-show="!isrole" index="/manage/homework">
                <el-icon><UserFilled /></el-icon><span>作业管理</span>
              </el-menu-item>
              <el-menu-item index="/self">
                <el-icon><UserFilled /></el-icon><span>个人中心</span>
              </el-menu-item>
<!--              <el-menu-item index="/text">-->
<!--                <el-icon><UserFilled /></el-icon><span>测试</span>-->
<!--              </el-menu-item>-->
            </el-menu >
          </el-aside>
          <el-container>
            <el-header style="height: 50px">
              <el-row :gutter="20">
                <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
                <el-col :span="8">
<!--                  <el-input-->
<!--                      :prefix-icon="Search"-->
<!--                      round-->
<!--                      v-model="id"-->
<!--                      style="-->
<!--                      width: 400px;-->
<!--                     color: #FFFFFF;-->
<!--                     margin-top: 10px"-->
<!--                      placeholder="搜索学生："-->
<!--                      class="layout"-->
<!--                  />-->
                </el-col>
                <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
                <el-col :span="4"><el-icon size="25px" @click="tuichu()" style="color: #FFFFFF;margin-top: 10px;margin-left: 200px"><SwitchButton /></el-icon></el-col>
              </el-row>

            </el-header>
            <el-main >
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-container>
  </div>
</template>
<style>
html, body, #app {
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-header {
    background-color:#323D56F9;
}
.el-aside {
    height:100%;
    background-color: #323D56F9;
}
.el-menu-item {
  background-color: rgba(51, 62, 88, 0.98);
  color: white !important;
  font-size: 12px;
  padding-left: 15px;
  justify-content: flex-start;
}
.el-main {
    //background-color: #F6F7FC;
  background-color: #fff;
}
.logo{
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  //margin-bottom: 20px;
  //background-color: rgba(51, 62, 88, 0.98);
}
.el-menu {
  --el-menu-hover-bg-color: #223869F9 !important;
  --el-menu-hover-color: #223869F9 !important;
}
.el-sub-menu {
  background-color: rgba(51, 62, 88, 0.98);
}
.el-sub-menu__title {
  color: white !important;
}
.is-active{
  color: #4285F4!important;
}
.layout{
  .el-input__wrapper{
    background-color: rgb(221.7, 222.6, 224.4);
    border-radius: 20px;
    color: black;
  }
  .el-input{
    --el-input-focus-border-color: rgb(221.7, 222.6, 224.4)
  }
  .el-input__inner{
    color: black;
  }
  input::placeholder {

  }
}

</style>